<template>
    <div class="ccnu-footer">
        <div class="center">
            <div class="footer-left">
                <div><img src="../../public/images/logo.png" alt="" width="100px"></div>
                <div>华中师范大学教育大数据应用技术国家工程实验室 版权所有</div>
            </div>
            <div class="footer-right">
                <h3>友情链接：</h3>
                <span>华中师范大学</span>
                <br>
                <span>华中师范大学人工智能教育学部</span>
                <br>
                <span>教育大数据应用技术国家工程实验室</span>
            </div>
            <div class="ewm">
                <img src="../../public/images/ewm.png" alt="" width="100px">
                <div style="color:#ccc">访问手机版</div>
            </div>
        </div>
        <div class="footer-bottom"><span>地址：湖北省 武汉市 珞喻路152号 华中师范大学南湖综合楼十一楼 </span><span>邮编：430079 | 联系电话：027-67867024 | 管理员信箱：nercel@mail.ccnu.edu.cn</span></div>
    </div>
</template>

<style lang="scss" scoped>
.ccnu-footer{
    background: linear-gradient(-150deg,#1c4f48,#28354b);
    color: white;
    // margin-top: 20px;
}
.center{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 40px;
    width: 92%;
    margin-left: 4%;
    justify-content: space-between;
}
.footer-left{
    text-align: left;
    color: #ccc;
}
.footer-right{
    text-align: left;
    h3{
        margin-bottom:10px;
        color: #eee;
    }
    span{
        margin-right: 20px;
        color: #ccc;
        display: inline-block;
        cursor: pointer;
    }
}
.footer-bottom{
    background: #333;
    padding: 10px;
    color: #ccc;
}

@media (max-width: 1060px) {
.center{
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}
.footer-left{
    margin-left: 0;
    margin-bottom: 20px;
}
.ewm{
    display: none;
    margin-top: 20px;
    text-align: left;
    width: 100%;
}
}
</style>